<template>
  <div
    class="line-player"
    ref="player"
    id="live-player"
  ></div>
</template>

<script>
import Clappr from 'clappr'
export default {
  name: 'LivePlayer',
  components: {},
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.init()
  },
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    init() {
      const player = new Clappr.Player({
        parent: this.$refs.player,
        source: this.src,
        width: '100%',
        height: '100%'
      })
      player.play()
    }
  },
  filters: {}
}
</script>
<style scoped lang="scss">
.line-player {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  video {
    border-radius: 20px;
  }
}
</style>
